<template>
  <a-calendar v-model:value="value">
    <template #dateCellRender="{ current }">
      <ul class="events">
        <li v-for="item in getListData(current)" :key="item.content">
          <a-badge :color="item.color" :text="item.content" />
        </li>
      </ul>
    </template>
    <template #monthCellRender="{ current }">
      <div v-if="getMonthData(current)" class="notes-month">
        <section>{{ getMonthData(current) }}</section>
        <span>Backlog number</span>
      </div>
    </template>
  </a-calendar>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onBeforeMount, unref, computed } from 'vue';

  import { Dayjs } from 'dayjs';
  //calendar使用参考
  //https://blog.csdn.net/weixin_59749798/article/details/126222326
  //https://www.cnblogs.com/heyhaiyang/p/14586281.html

  export default defineComponent({
    name: 'DutyMonthCalendarComponent',
    components: {},
    props: {
      groups: {},
      schedules: {},
    },
    setup(props) {
      // console.log('DutyMonthCalendarComponent setup props.schedules', props.schedules);
      const value = ref<Dayjs>();

      function getListData(value: Dayjs) {
        // console.log('getListData', value);
        // console.log('getListData props.schedules', props.schedules);
        let listData = [];
        if (
          props.schedules != undefined &&
          props.schedules != null &&
          props.schedules.length > 0x0 &&
          props.schedules.length > value.date()
        ) {
          let dateSchedule = props.schedules[value.date()];
          if (dateSchedule.items.length > 0x0) {
            let scheduleGroupIndex = 0x0;
            dateSchedule.items.forEach((item) => {
              //获取值班分组的名称
              let groupName = props.groups[scheduleGroupIndex].name || '';
              listData.push({
                color: getListDataColor(scheduleGroupIndex),
                content: '(' + groupName + ')' + item.members,
              });

              scheduleGroupIndex++;
            });
          }
        }
        return listData;
      }

      function getListDataColor(index) {
        let total = 7;
        if (index % total === 1) return 'pink';
        else if (index % total === 2) return 'yellow';
        else if (index % total === 3) return 'orange';
        else if (index % total === 4) return 'cyan';
        else if (index % total === 5) return 'green';
        else if (index % total === 6) return 'blue';
        else if (index % total === 7) return 'purple';
        return '#108ee9';
      }

      function getMonthData(value: Dayjs) {
        if (value.month() === 8) {
          return 1394;
        }
      }

      onBeforeMount(() => {});

      return {
        value,
        props,
        getListData,
        getMonthData,
      };
    },
  });
</script>
<style scoped lang="less"></style>
